<template>
	<view class="detail-pages pages">
		<view class="classify-tab-block">
			<view class="tab-content" style="flex-grow: 1;">
				<view :class="status==''?'active':''" class="tab-item" @click="getMallTypeAll()">全部</view>
				<view @click="getMallType(item.id)" :class="status==item.id?'active':''" class="tab-item"
					v-for="(item,index) in tabList" :key="item.id">{{item.name}}</view>
			</view>
		</view>
		<view class="card-block">
			<view v-if="list.length > 0" class="card-item">
				<view v-for="item in list" :key="item.id" class="card-list">
					<view class="card-img">
						<view class="left-item">
							<view class="price FZHZGBJ">{{ item.voucher }}</view>
							<view class="text">券</view>
						</view>
						<view class="right-item">
							<view class="card-title">
								<view class="card-name">兑换券</view>
								<view class="use-btn" @click="sisignIn(item)"
									style="display: flex; justify-content: flex-end;padding-right: 20rpx;">
									<view class="use" v-if="item.status==3">使用</view>
									<view class="use" v-if="item.type==2&&item.status==2">待激活</view>
								</view>
							</view>
							<view class="card-go">
								<view class="expire">{{item.expirationTime }}过期</view>
							</view>
							<view class="card-go">
								<view class="expire" v-if="item.status==3">已激活</view>
								<view class="expire" v-if="item.status==4">已核销</view>
								<view class="expire" v-if="item.type==2&&item.status==2">需激活才可使用</view>
							</view>
						</view>
					</view>

				</view>
			</view>
			<view v-if="more == false && list.length == 0" class="empty">暂无数据</view>
			<view v-else-if="more == false && list.length > 0" class="empty">没有更多了</view>
		</view>
		<view class="sign-pop" v-if="signShow == true">
			<view class="sign-block">
				<view class="sign-top">
					<view class="left">
						二维码
					</view>
					<view @click="close">
						<image
							src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/close.png"
							mode=""></image>
					</view>
				</view>
				<image :src="cloudStorage+verificationFilepath" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMyCardListApi
	} from '@/api/activities.js';
	import {
		isMore
	} from '@/util/util.js';

	export default {
		data() {
			return {
				conf: {
					page: 1,
					limit: 10
				},
				more: true,
				list: [],
				status: '',
				tabList: [{
						id: 2,
						name: '待激活'
					},
					{
						id: 3,
						name: '待使用'
					},
					{
						id: 4,
						name: '已核销'
					},
					{
						id: 5,
						name: '已失效'
					},
				],
				verificationFilepath: '',
				signShow: false
			};
		},
		methods: {
			sisignIn(e) {
				if (e.type == 2) {
					this.verificationFilepath = e.voucherFilepath

				} else {
					this.verificationCode = e.verificationCode
					if (e.verificationFilepath) {
						this.verificationFilepath = e.verificationFilepath
					}
				}

				this.signShow = true;
			},
			close() {
				this.signShow = false
				this.getList(true)
			},
			handleRefresh() {
				this.conf.page = 1;
				this.more = true;
				this.getList(true);
			},
			getMallType(e) {
				this.status = e
				this.getList(true)
			},
			getMallTypeAll() {
				this.status = ''
				this.getList(true)
			},
			getList(refresh = false) {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				getMyCardListApi({
					page: this.conf.page,
					limit: this.conf.limit,
					status: this.status,
				}).then((res) => {
					let list = res.list || [];
					if (refresh) {
						this.list = list;
					} else {
						this.list = [...this.list, ...list];
					}

					this.more = isMore(this.conf.page, this.conf.limit, res.count);
				});
			}
		},
		onPullDownRefresh() {
			this.handleRefresh();
		},
		onReachBottom() {
			if (this.more) {
				this.conf.page++;
				this.getList();
			}
		},
		onLoad(e) {
			this.getList(true);
		}
	};
</script>

<style lang="scss" scoped>
	.detail-pages {
		overflow: hidden;
		padding: 30rpx;

		.classify-tab-block {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 20rpx;

			.tab-content {
				display: flex;
				justify-content: space-between;

				.tab-item {
					padding: 10rpx;
					font-size: 30rpx;
					flex: none;
					color: #FF2F34;
				}

				.tab-item.active {
					font-size: 32rpx;
					color: #FF2F34;
					font-family: 'FangZhengHanZhenGuangBiaoJianTi';
				}
			}

			.iconfont {
				font-size: 32rpx;
				font-weight: bold;
				color: #fff;
			}
		}

		.card-block {
			padding-bottom: 30rpx;

			.card-item {
				display: flex;
				flex-direction: column;
				margin-top: 20rpx;
				align-items: center;

				.card-list {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 100%;

					.card-img {
						width: 100%;
						height: 250rpx;
						margin-bottom: 20rpx;
						background: url('https://suzhou-charge-pile-1306862033.cos.ap-chengdu.myqcloud.com/uniapp/images/voucherCardVoucher_new.png') no-repeat center;
						background-size: 100%;
						display: flex;
						align-items: center;
					}

					.left-item {
						width: 260rpx;
						height: 220rpx;
						border-radius: 10rpx;
						position: absolute;
						display: flex;
						align-items: center;
						justify-content: center;

						.price {
							color: #fff;
							font-size: 46rpx;
						}

						.text {
							color: #fff;
						}
					}

					.right-item {
						width: calc(100% - 260rpx);
						height: 220rpx;
						border-radius: 10rpx;
						display: flex;
						flex-direction: column;
						padding: 20rpx;
						padding-top: 30rpx;
						margin-left: 280rpx;

						.card-title {
							display: flex;
							justify-content: space-between;
							align-items: center;


							.use {
								border-radius: 60rpx;
								border: 1px solid #ff566b;
								color: #fa3222;
								background-color: #fff;
								width: 110rpx;
								height: 50rpx;
								display: flex;
								font-size: 30rpx;
								align-items: center;
								justify-content: center;

								margin-bottom: 10rpx;
							}

							.card-name {
								width: calc(100% - 120rpx);
								font-size: 30rpx;
								font-weight: 400;
								margin-bottom: 20rpx;
							}

						}

						.card-go {
							// border: 1px solid red;
							// display: flex;
							// justify-content: space-between;

							height: 70rpx;

							.condition {
								color: #767676;
								font-size: 24rpx;
								padding-bottom: 20rpx;
							}

							.des {
								color: #767676;
								font-size: 24rpx;

							}

							.expire {
								color: #767676;
								font-size: 24rpx;
								height: 40rpx;
								margin-top: 15rpx;
							}
						}
					}
				}
			}
		}

		.add-img {
			width: 80rpx;
			height: 80rpx;
			position: fixed;
			bottom: 120rpx;
			right: 40rpx;
		}

		.dialog {
			width: 80%;
			max-width: 500rpx;
			padding: 40rpx;
			background-color: white;
			border-radius: 20rpx;
			box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 1000;
		}

		.title {
			width: 100%;
			height: 60rpx;
			text-align: center;
			margin-bottom: 40rpx;
		}

		.dialog input {
			width: 100%;
			height: 60rpx;
			padding-left: 20rpx;
			border: 1px solid #ddd;
			border-radius: 10rpx;
			margin-bottom: 40rpx;
		}

		.dialog .btn {
			width: 100%;
			height: 54rpx;
			font-size: 28rpx;
			background: linear-gradient(to right, #2ac6ff, #6585fd);
			border-radius: 10rpx;
			color: white;
		}

		.sign-pop {
			position: fixed;
			left: 0;
			top: 0;
			background: rgba(0, 0, 0, 0.2);
			z-index: 999999;
			width: 100vw;
			height: 100vh;

			.sign-block {
				width: calc(100% - 240rpx);
				height: 550rpx;
				background: #fff;
				z-index: 99;
				position: fixed;
				transform: translate(-50%, 0%);
				left: 50%;
				bottom: 29%;
				box-shadow: 0 0 6px 0px #dadada;
				border-radius: 30rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 30rpx;

				.sign-top {
					display: flex;
					justify-content: space-between;
					width: 100%;

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}

				image {
					width: 100%;
				}
			}
		}
	}
</style>